<!--商户详情-->
<template>
	<div class="merchant-container">
		<div>
			<el-card>
				<el-form :inline="true" :model="queryData" label-width="auto">
					<el-form-item :label="`${$t('merchant.merchant_name')}:`">
						<merchant-select
							v-model.trim="queryData.merchantId"
							:placeholder="$t('common.please_choose')"
						></merchant-select>
					</el-form-item>
					<el-form-item style="margin-left: 10px">
						<el-button
							:disabled="!queryData.merchantId"
							:loading="loading"
							icon="el-icon-search"
							size="medium"
							type="primary"
							@click="handleSearch"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							:loading="loading"
							icon="el-icon-refresh-left"
							size="medium"
							@click="resetForm"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card
				v-if="merchantDetail.id && queryData.merchantId"
				v-loading="loading"
				class="card-container"
			>
				<!--基础信息部分-->
				<div>
					<div class="base-info">
						<div style="display: flex;align-items:center;">
							<h3 style="margin-right: 15px">
								{{ $t('merchant.base_info') }}
							</h3>
							<el-button
								:disabled="
									!merchantDetail.id || !queryData.merchantId
								"
								type="primary"
								@click="handleSearch"
							>
								{{ $t('common.refresh') }}
							</el-button>
						</div>
						<div
							style="padding-left: 30px;display: flex; justify-content:  flex-start;border-left: 1px solid #cccccc"
						>
							<span class="arrow-right">
								<i class="el-icon-edit"></i>
								<span>{{ $t('merchant.info_edit') }}</span>
							</span>
							<div class="btn-items">
								<!--								<el-button-->
								<!--									v-if="hasPermission('801021')"-->
								<!--									type="primary"-->
								<!--									size="small"-->
								<!--									@click="showModfiyDialog"-->
								<!--								>-->
								<!--									名称修改-->
								<!--								</el-button>-->
								<el-button
									v-if="hasPermission('801022')"
									:disabled="
										!merchantDetail.id ||
											!queryData.merchantId
									"
									size="small"
									type="primary"
									@click="showStatusDialog"
								>
									{{ $t('merchant.status_modify') }}
								</el-button>
								<el-button
									v-if="hasPermission('801023')"
									:disabled="
										!merchantDetail.id ||
											!queryData.merchantId
									"
									size="small"
									type="primary"
									@click="showRemarkDialog"
								>
									{{ $t('merchant.remark_modify') }}
								</el-button>
							</div>
						</div>
					</div>
					<ul class="info-content">
						<li
							v-for="item in baseInfo"
							:key="item.id"
							class="item-list"
						>
							<p
								v-if="item.type === 'status'"
								style="margin-top: 5px;"
							>
								{{ item.title }}
							</p>
							<p v-else>{{ item.title }}</p>
							<el-tag
								v-if="item.type === 'status'"
								:type="
									baseInfo.status.values ===
									typeFilter(1, 'merchantStatus')
										? 'success'
										: 'danger'
								"
							>
								<span>
									{{ baseInfo.status.values }}
								</span>
							</el-tag>
							<el-tooltip
								v-else
								:content="item.values"
								:disabled="
									item.values && item.values.length <= 20
								"
								class="item"
								effect="dark"
								enterable
								placement="top-start"
							>
								<p class="nowrap">{{ item.values }}</p>
							</el-tooltip>
						</li>
					</ul>
				</div>
				<!--场馆信息-->
				<div class="venue-item">
					<h3>{{ $t('merchant.venue_set_info') }}</h3>
					<el-table
						:data="venueData"
						border
						style="width: 700px; margin-top: 30px"
					>
						<el-table-column
							:label="$t('merchant.insert_venue')"
							align="center"
							prop="venueName"
						></el-table-column>
						<el-table-column
							:label="`${$t('merchant.agent_venue_pre')}%`"
							align="center"
							prop="venueFeeRate"
						>
							<template slot-scope="scope">
								{{
									`${formatTwoDecimalFull(
										scope.row.venueFeeRate * 10000 * 0.01
									)}` || '-'
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!--配置信息-->
				<div class="set-item">
					<h3>{{ $t('merchant.pay_set_info') }}</h3>
					<ul>
						<li
							v-for="item in paySet"
							:key="item.id"
							class="set-list"
						>
							<p style="margin-right: 8px;min-width: 80px">
								{{ item.title }}
							</p>
							<p style="flex: 1">{{ item.values || '-' }}</p>
						</li>
					</ul>
				</div>
				<div class="set-item">
					<h3>{{ $t('merchant.message_set_info') }}</h3>
					<ul>
						<li class="set-list">
							<p style="margin-right: 8px; min-width: 80px;">
								{{ $t('merchant.message_channel') }}:
							</p>
							<div v-if="merchantDetail.smsChannelList.length">
								<div style="flex: 1">
									<el-tag
										v-for="item in merchantDetail.smsChannelList"
										:key="item.id"
										:type="
											item.channelStatus === '0'
												? 'danger'
												: 'success'
										"
										style="margin:0 6px 8px 0;"
									>
										{{ item.channelName }}
									</el-tag>
								</div>
							</div>
							<div v-else>-</div>
						</li>
					</ul>
				</div>
				<div class="set-item">
					<h3>{{ $t('merchant.service_set_info') }}</h3>
					<ul>
						<li class="set-list">
							<p style="margin-right: 8px;min-width: 120px;">
								{{ $t('merchant.muber_service_url') }}：
							</p>
							<p>{{ merchantDetail.memberUrl || '-' }}</p>
						</li>
						<li class="set-list">
							<p style="margin-right: 8px;min-width: 120px;">
								{{ $t('merchant.agent_service_url') }}：
							</p>
							<p>{{ merchantDetail.proxyUrl || '-' }}</p>
						</li>
					</ul>
				</div>
				<div class="set-item">
					<h3>{{ $t('merchant.game_url_set_info') }}</h3>
					<ul>
						<li class="set-list">
							<p style="margin-right: 8px;min-width: 115px;">
								{{ $t('merchant.all_download_url') }}：
							</p>
							<p>{{ merchantDetail.downUrl || '-' }}</p>
						</li>
						<li class="set-list">
							<p style="margin-right: 8px;min-width: 110px;">
								{{ $t('merchant.pc_download_url') }}：
							</p>
							<p>{{ merchantDetail.pcUrl || '-' }}</p>
						</li>
						<li class="set-list">
							<p style="margin-right: 8px;min-width: 110px;">
								{{ $t('merchant.h5_download_url') }}：
							</p>
							<p>{{ merchantDetail.h5Url || '-' }}</p>
						</li>
					</ul>
				</div>
			</el-card>
		</div>
		<!--状态修改弹窗-->
		<el-dialog
			:visible.sync="visibleStatusDialog"
			:title="$t('merchant.merchant_status_modify')"
			width="500px"
			@close="handleStatusDialogClose"
		>
			<el-form
				ref="statusDialogRef"
				:model="statusDialogForm"
				:rules="formRules.status"
				label-width="84px"
			>
				<el-form-item
					:label="`${$t('merchant.merchant_status')}:`"
					prop="editInfo"
				>
					<el-select
						v-model.trim="statusDialogForm.editInfo"
						:placeholder="$t('common.please_choose')"
						style="width: 375px;"
					>
						<el-option
							v-for="item in merchantStatusType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.remark_info')}:`"
					prop="remark"
				>
					<el-input
						v-model.trim="statusDialogForm.remark"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						style="width: 375px;"
						rows="6"
						show-word-limit
						type="textarea"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						:loading="btnLoading"
						@click="handleStatusDialogClose"
					>
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						:loading="btnLoading"
						type="primary"
						@click="handleStatusSubmit"
					>
						{{ $t('common.submit') }}
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!--备注修改-->
		<el-dialog
			:close-on-click-modal="false"
			:title="$t('merchant.merchant_remark_modify')"
			:visible.sync="visibleRemarksDialog"
			width="500px"
			@close="handleRemarksDialogClose"
		>
			<el-form
				ref="remarksDialogRef"
				:model="remarksDialogForm"
				:rules="formRules.remarks"
				label-width="auto"
			>
				<el-form-item
					:label="`${$t('merchant.remark_info')}:`"
					prop="editInfo"
				>
					<el-input
						v-model.trim="remarksDialogForm.editInfo"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						rows="6"
						show-word-limit
						type="textarea"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						:loading="btnLoading"
						@click="handleRemarksDialogClose"
					>
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						:loading="btnLoading"
						type="primary"
						@click="handleRemarksSubmit"
					>
						{{ $t('common.submit') }}
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import {
	queryMerchantDetailApi,
	updateMerchantInfoApi
} from '@/api/merchant/merchant-manage/merchant-detail'
import list from '@/mixins/list'
import funds from '@/api/funds'
import { formatTwoDecimalFull } from '@/utils'
import { routerNames } from '@/utils/consts'

export default {
	name: routerNames.merchantDetails,
	mixins: [list],
	data() {
		return {
			queryData: {
				merchantId: ''
			},
			loading: false,
			querySuccess: false,
			merchantDetail: {},
			baseInfo: {
				merchantName: {
					title: `${this.$t('merchant.merchant_name')}:`,
					values: '-'
				},
				merchantCode: {
					title: `${this.$t('merchant.merchant_code')}:`,
					values: '-'
				},
				merchantTemplate: {
					title: `${this.$t('merchant.merchant_template')}:`,
					values: '模板一'
				},
				status: {
					title: `${this.$t('merchant.merchant_status')}:`,
					values: '-',
					type: 'status'
				},
				merchantLevel: {
					title: `${this.$t('merchant.merchant_level')}:`,
					values: '-'
				},
				parentMerchantName: {
					title: `${this.$t('merchant.merchant_up')}:`,
					values: '-'
				},
				topMerchantName: {
					title: `${this.$t('merchant.merchant_main')}:`,
					values: '-'
				},
				languages: {
					title: `${this.$t('merchant.merchant_lang')}:`,
					values: '-'
				},
				currency: {
					title: `${this.$t('merchant.merchant_wallet')}:`,
					values: '-'
				},
				proxy: {
					title: `${this.$t('merchant.first_account')}:`,
					values: '-'
				},
				createdAt: {
					title: `${this.$t('merchant.create_time')}:`,
					values: '-'
				},
				remark: {
					title: `${this.$t('merchant.member_remark')}:`,
					values: '-'
				}
			},
			venueData: [],
			paySet: {
				channelRecharge: {
					title: `${this.$t('merchant.rechange_channel')}:`,
					values: '-'
				},
				channelWithdraw: {
					title: `${this.$t('merchant.draw_channel')}:`,
					values: '-'
				}
			},
			visibleModfiyDialog: false,
			modfiyDialogForm: { editInfo: '', remark: '' },
			statusDialogForm: { editInfo: '', remark: '' },
			remarksDialogForm: { editInfo: '' },
			visibleStatusDialog: false,
			visibleRemarksDialog: false,
			formRules: {
				modfiy: {
					editInfo: [
						{
							required: true,
							min: 2,
							message: this.$t('merchant.check_length_2'),
							trigger: 'blur'
						}
					],
					remark: [
						{
							required: true,
							min: 2,
							max: 500,
							message: this.$t('merchant.check_length_2'),
							trigger: 'blur'
						}
					]
				},
				status: {
					editInfo: [
						{
							required: true,
							message: this.$t('merchant.select_status'),
							trigger: 'blur'
						}
					],
					remark: [
						{
							required: true,
							min: 2,
							max: 500,
							message: this.$t('merchant.check_length_2'),
							trigger: 'blur'
						}
					]
				},
				remarks: {
					editInfo: [
						{
							required: true,
							min: 2,
							max: 500,
							message: this.$t('merchant.check_length_2'),
							trigger: 'blur'
						}
					]
				}
			},
			btnLoading: false,
			rechargeIdList: [],
			drawIdList: []
		}
	},
	computed: {
		merchantStatusType() {
			return this.globalDics?.merchantStatus || []
		}
	},
	watch: {
		'modfiyDialogForm.editInfo': {
			handler(newValue) {
				if (newValue) {
					this.modfiyDialogForm.editInfo = newValue.replace(
						/[^a-zA-Z0-9\u4E00-\u9FA5]/g,
						''
					)
				}
			},
			deep: true
		}
	},
	methods: {
		formatTwoDecimalFull,
		// 获取充值通道列表
		async rechargeList() {
			try {
				const {
					data: rechargeData
				} = await funds.queryPaymentMerchantConfigList({
					paymentMerchantType: 1,
					pageNum: 1,
					pageSize: 1000
				})
				const {
					data: drawData
				} = await funds.queryPaymentMerchantConfigList({
					paymentMerchantType: 2,
					pageNum: 1,
					pageSize: 1000
				})
				this.rechargeIdList = rechargeData?.record
				this.drawIdList = drawData?.record
			} catch (e) {
				console.log(e)
			}
		},
		// 获取数据
		async handleSearch() {
			try {
				this.loading = true
				this.paySet.channelRecharge.values = '-'
				this.paySet.channelWithdraw.values = '-'
				this.rechargeIdList = []
				this.drawIdList = []
				const res = await queryMerchantDetailApi({
					id: this.queryData.merchantId
				})
				await this.rechargeList()
				this.merchantDetail = res.data

				// 获取基本信息
				Object.keys(this.baseInfo).forEach((key) => {
					Object.keys(res.data).map((item) => {
						if (item === key) {
							let value = res.data[item] || '-'
							if (item === 'languages') {
								value = value
									.split(',')
									.map((item) =>
										this.typeFilter(
											item,
											'language'
										).replace('-', '')
									)
									.join('')
							}
							if (item === 'status') {
								value = this.typeFilter(value, 'merchantStatus')
							}
							this.baseInfo[key]['values'] = value
						}
					})
				})
				// 获取场馆列表
				this.venueData = this.merchantDetail.list
				Object.keys(this.paySet).forEach((key) => {
					Object.keys(res.data).map((item) => {
						if (item === key) {
							if (key === 'channelRecharge') {
								this.paySet[key][
									'values'
								] = this.caluctaleRechargeChanel(res.data[item])
							} else {
								this.paySet[key][
									'values'
								] = this.caluctaleWithChanel(res.data[item])
							}
						}
					})
				})
				this.loading = false
				this.querySuccess = true
			} catch (e) {
				this.loading = false
				this.querySuccess = false
			}
		},

		// 重置
		resetForm() {
			this.merchantDetail = {}
			this.queryData.merchantId = undefined
			this.querySuccess = false
		},
		// 显示修改弹窗逻辑
		showModfiyDialog() {
			this.visibleModfiyDialog = !this.visibleModfiyDialog
			this.modfiyDialogForm.editInfo = this.merchantDetail.merchantName
		},
		handleModfiyDialogClose() {
			if (!this.$refs.modfiyDialogRef) return
			this.$refs.modfiyDialogRef.resetFields()
			this.modfiyDialogForm = { editInfo: undefined, remark: undefined }
			this.visibleModfiyDialog = false
		},
		// 名称修改
		handleModfiySubmit() {
			this.$refs.modfiyDialogRef.validate(async (valid) => {
				if (valid) {
					this.btnLoading = true
					try {
						await updateMerchantInfoApi({
							type: 1,
							merchantId: this.merchantDetail.id,
							...this.modfiyDialogForm
						})
						this.$message({
							message: `${this.$t('common.modify_success')}`,
							type: 'success'
						})
						await this.$store.dispatch('user/getMerchantList')
						this.modfiyDialogForm = {
							editInfo: undefined,
							remark: undefined
						}
						this.btnLoading = false
						this.visibleModfiyDialog = false
						await this.handleSearch()
					} catch (e) {
						this.btnLoading = false
					}
				}
			})
		},

		// 显示状态修改弹窗
		showStatusDialog() {
			this.visibleStatusDialog = !this.visibleStatusDialog
			this.globalDics?.merchantStatus.map((item) => {
				if (item.description === this.merchantDetail.status) {
					this.statusDialogForm.editInfo = item.code
				}
			})
		},
		handleStatusDialogClose() {
			if (!this.$refs.statusDialogRef) return
			this.$refs.statusDialogRef.resetFields()
			this.statusDialogForm = { editInfo: undefined, remark: undefined }
			this.visibleStatusDialog = false
		},
		handleStatusSubmit() {
			this.$refs.statusDialogRef.validate(async (valid) => {
				if (valid) {
					this.btnLoading = true
					try {
						if (this.statusDialogForm.editInfo === '0') {
							await this.$confirm(
								`<strong>该操作将导致会员无法正常访问！<br/><span style='font-size:12px;color:#c1c1c1;font-weight: 500'>是否继续？</span></strong>`,
								`确认提示`,
								{
									dangerouslyUseHTMLString: true,
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}
							)
						}
						await updateMerchantInfoApi({
							type: 2,
							merchantId: this.merchantDetail.id,
							...this.statusDialogForm
						})
						this.$message({
							message: `${this.$t('common.modify_success')}`,
							type: 'success'
						})
						this.statusDialogForm = { editInfo: '', remark: '' }
						this.btnLoading = false
						this.visibleStatusDialog = false
						await this.handleSearch()
					} catch (e) {
						if (e === 'cancel') {
							this.visibleStatusDialog = false
						}
						this.btnLoading = false
					}
				}
			})
		},

		// 备注修改
		showRemarkDialog() {
			this.visibleRemarksDialog = !this.visibleRemarksDialog
			this.remarksDialogForm.editInfo = undefined
		},
		handleRemarksSubmit() {
			this.$refs.remarksDialogRef.validate(async (valid) => {
				if (valid) {
					this.btnLoading = true
					try {
						await updateMerchantInfoApi({
							type: 3,
							merchantId: this.merchantDetail.id,
							remark: this.remarksDialogForm.editInfo,
							...this.remarksDialogForm
						})
						this.$message({
							message: `${this.$t('common.modify_success')}`,
							type: 'success'
						})
						this.remarksDialogForm = { editInfo: '' }
						this.btnLoading = false
						this.visibleRemarksDialog = false
						await this.handleSearch()
					} catch (e) {
						this.btnLoading = false
					}
				}
			})
		},
		handleRemarksDialogClose() {
			if (!this.$refs.remarksDialogRef) return
			this.$refs.remarksDialogRef.resetFields()
			this.remarksDialogForm = { editInfo: undefined }
			this.visibleRemarksDialog = false
		},
		// 计算充值通道列表
		caluctaleRechargeChanel(row) {
			const _arr = row.split(',')
			let str = ''
			_arr.map((item) => {
				this.rechargeIdList.map((i) => {
					if (i.id === item) {
						str = str + ' ' + i.channelName
					}
				})
			})

			return str
		},
		caluctaleWithChanel(row) {
			const _arr = row.split(',')
			let str = ''
			_arr.map((item) => {
				this.drawIdList.map((i) => {
					if (i.id === item) {
						str = str + ' ' + i.channelName
					}
				})
			})

			return str
		}
	}
}
</script>

<style scoped lang="scss">
.merchant-container {
	margin: 20px;

	.card-container {
		margin-top: 20px;
		padding: 20px;

		.base-info {
			width: 620px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.arrow-right {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.btn-items {
				margin-left: 30px;
				display: flex;
			}
		}

		.info-content {
			margin-top: 20px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;

			.item-list {
				margin: 20px 0;
				width: 280px;
				display: flex;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.venue-item {
			border-top: 1px solid #cccccc;
			margin-top: 20px;
		}

		.set-item {
			border-top: 1px solid #cccccc;
			margin-top: 40px;

			.set-list {
				margin: 20px 0 30px 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #595959;
			}
		}
	}
}
.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vi_VN {
	.merchant-container .card-container .info-content .item-list {
		width: 470px;
	}
}
</style>
